<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Simple JUL</title>
	<style type="text/css">
	html, body {
		margin: 0;
		padding: 0;
		width: 100%;
		background-color: #ddd;
	}
	body {
		font-family: 'Helvetica', Helvetica, sans-serif;
		font-size:	13px;
		color: #111;
	}
	#content {
		width: 960px;
		margin: 10px auto;
		padding: 15px 45px;
		background-color: #fff !important;
	}
	#footer {
		text-align: center;
		font-size: x-small;
	}
	</style>	
	<script type="text/javascript" src="../js/jul.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
</head>
<body>
	<div id="content"></div>
	<div id="footer">
  <script type="text/javascript">
  document.write('Copyright &copy; 2012 - ' + (new Date()).getFullYear() + ' The Zonebuilder. Powered by JUL ' + JUL.version);
  </script>
	</div>
	<script type="text/javascript">
	// define namespaces for the application and its UI
	JUL.ns('APP.ui');
	JUL.apply(APP, {
		version: '1.0',
		members: [1, 3, 5],
		css: {left: '10px'}
	});
	// overwrite some members using JUL.apply
	JUL.apply(APP, {
		version: '1.1',
		members: [2, 4],
		css: {right: '5px'},
		// add a debug function
		debug: function(sTitle, oData) {
			var oH2 = document.createElement('h2');
			oH2.innerHTML = sTitle;
			var oPre = document.createElement('pre');
			var oCode = document.createElement('code');
			// use JUL.UI.obj2str to print the object
			oCode.innerHTML = JUL.UI.obj2str(oData);
			oPre.appendChild(oCode);
			var oContent = document.getElementById('content');
			oContent.appendChild(oH2);
			oContent.appendChild(oPre);
		}
	});
	
	// add a simple widget constructor to APP.ui namespace
	JUL.apply(APP.ui, {
		Widget: function(oConfig) {
			this.core = 'wiz';
			JUL.apply(this, oConfig);
			// print object
			APP.debug('APP.ui.Widget instance', this);
		}
	});
	// print APP
	APP.debug('Application instance', APP);
		
	// test JOL.UI default factory
	APP.oWidget = JUL.UI.factory('APP.ui.Widget', {
		chrome: 'red'
	});

		// test JUL.UI.createDom custom factory
		APP.oPress = JUL.UI.createDom({
			xclass: 'html',
			id: 'button-press',
			tag: 'input',
			'type': 'button',
			value: 'Press',
			listeners: {
				click: function() {
					alert('Button pressed!');
				}
			}
		});
		// create a h2 with inline styling
		APP.oText = JUL.UI.createDom({
			xclass: 'html',
			id: 'h2-desc',
			tag: 'h2',
			style: 'border:1px solid #555',
			css: 'abc',
			html: 'A sample header'
		});
		// add DOM elements to container div
		document.getElementById('content').appendChild(APP.oText);
		document.getElementById('content').appendChild(APP.oPress);

		// create a DOM tree
		JUL.UI.useTags = true;
		JUL.UI.customFactory = JUL.UI.createDom;
		JUL.UI.defaultClass = 'html';
		JUL.UI.membersProperties.push('ul');
		var oConfig = {
			tag: 'h3',
			id: 'h3-s',
			css: 'xvb',
			html: 'Header 3',
			style: 'border: 1px solid #555',
			ul: [
				{tag: 'li', html: 'First'},
				{tag: 'li', html: 'Second'},
				{tag: 'li', html: 'Third', ul: [
					{tag: 'li', html: 'Forth', ul: [
						{tag: 'li', html: 'Sixth'}
					]},
					{tag: 'li', html: 'Fifth'}
				]}
			]
		};
		APP.oTree = JUL.UI.create(oConfig);
		// add the DOM tree to content div
		document.getElementById('content').appendChild(APP.oTree);
	</script>
</body>
</html>
